<template>
  <div class="mainBody">
    <div class="mainImgBox">
      <div class="titleTop">
        <span class="fontHt">TV修改</span>
      </div>
      <img src="http://mcgamehome.love/img/background/qOUe5d.jpg" alt="http://mcgamehome.love/img/background/qOUe5d.jpg">
    </div>
    <div class="nrBody">
      <!--      <div v-for="(item, index) in addForms.urlList" :key="index">-->
      <div class="addVideoUrlBox">
        <!--      <div class="addWaike">-->
        <div class="addOne"><span>主键id</span><input v-model.trim="list.items.id" class="commentInput marl20"  type="text" placeholder="id"></div>
        <div class="addOne"><span class="mar-l-10">视频id</span><input v-model.trim="list.items.tvUrl" class="commentInput"  type="text" placeholder="视频id"></div>
        <div class="addOne"><span class="mar-l-10">视频评分</span><input v-model.trim="list.items.tvPf" class="commentInput"  type="text" placeholder="视频评分"></div>
        <!--          <button type="button" class="commentUpButton zdy fontHt" @click="reMoveUrl(index)">删除</button>-->
        <!--      </div>-->
      </div>
      <div class="addOne"><span>视频图片</span><input v-model.trim="list.items.tvImg" class="commentInput" type="text" placeholder="视频图片"></div>
      <div class="addOne"><span>视频颜色</span><input v-model.trim="list.items.color" class="commentInput" type="text" placeholder="视频展示背景颜色"></div>
      <div class="addOne"><span>视频名字</span><input v-model.trim="list.items.tvName" class="commentInput" type="text" placeholder="视频名字"></div>
      <textarea v-model.trim="list.items.tvTitle" class="commentInput errorShow" type="text" placeholder="视频标题描述"></textarea>
      <div class="addOne"><span>视频链接</span><input v-model.trim="list.items.tvLj" class="commentInput" type="text" placeholder="视频链接"></div>
      <!--      </div>-->
      <div class="butBox">
        <button type="button" class="commentUpButton fontHt" @click="setTvOne">修改</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import API from "@/api/AxiosConfig";
import {useRoute} from "vue-router";

const route = useRoute()
const list = reactive({
  // years: [],
  items: {
    id:null,
    tvName:'',
    tvPf:'',
    tvTitle:'',
    tvUrl:'',
    tvPfNum:'',
    tvImg:'',
    color:'',
    clackNum:null,
    tvLj:''
  }
})

onMounted(() => {
    API({ url: '/api/videoTvOne/'+route.query.id, method: 'get'}).then(res => {
      list.items = res.data
    }).catch(err => {

    })
})
function setTvOne() {
  API({ url: '/api/videoTvOneSet', method: 'post' ,data:list.items}).then(res => {
    list.items = res.data
  }).catch(err => {

  })
}
</script>

<style lang="less" scoped>
.butBox{
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 30px 0;
}
.mar-l-10{
  margin-left: 10px;
}
.addWaike{
  width: 100%;
  display: flex;
  flex-direction: row;
}
.addOne{
  flex: 1;
  display: flex;
  margin: 10px 0;
}
.addOne>span{
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-content: center;
  margin-right: 10px;
}
.addVideoUrlBox{
  width: 100%;
  display: flex;
  margin-top: 20px;
}
.inputBox{
  width: 100%;
  position: relative;
}
.clearSpan{
  position: absolute;
  flex: 0;
  right: 15px;
  top: 30%;
  display: none;
}
.videotext{
  display: flex;
  flex-direction: row;
  position: relative;
  height: 100%;
  flex: 1;
}
.videoInput{
  display: flex;
  flex-direction: row;
  position: relative;
  margin-bottom: 15px;
}
.commentUpButton{
  width: 80px;
  height: 45px;
  color: white;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 15px;
  border-radius: 4px;
  outline: none;
  border: none;
  background-color: #2d8cf0;
  margin-left: 15px;
}
.copyBut{
  position: absolute;
  right: 5px;
  top: 5px;
  width: 45px;
  height: 25px;
  background-color: #b8b8b8;
}
.zdy{
  margin-top: 10px;
  background-color: deeppink;
}
.copyBut:hover{
  background-color: #2d8cf0;
}
.commentInput{
  display: inline-block;
  box-sizing: border-box;
  overflow: auto;
  border-radius: 6px;
  border: 1px solid #F1F2F3;
  width: 100%;
  height: 45px;
  line-height: 32px;
  transition: 0.2s;
  padding: 5px 10px;
  outline: none;
  vertical-align: middle;
  resize: none;
  font-size: 15px;
  background: #F1F2F3;
  font-family: 黑体;
  font-weight: bold;
}
.errorShow{
  height: 100px;
}
.marl20{
  margin-left: 18px;
}
.videoIn{
  padding-right: 25px;
}
.commentInput:hover{
  background: white;
}
.nrBody{
  display: flex;
  padding: 35px 35px;
  flex-direction: column;
  font-family: 黑体;
  font-weight: bold;
}
.mainBody{
  display: flex;
  width: 100%;
  flex-direction: column;
}
.mainImgBox{
  width: 100%;
  height: 500px;
  overflow: hidden;
  position: relative;
}
.mainImgBox>img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}
.titleTop{
  color: #FFFFFF;
  font-size: 40px;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  z-index: 1;
  user-select: none;
}
.fontHt{
  font-family: 黑体;
  font-weight: bold;
}
@media screen and (min-width: 2061px) {
  .nrBody {
    width: 1680px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 1559.8px) and (max-width: 2060.8px) {
  .nrBody {
    margin: 0 140px 0 140px;
  }
}
</style>
